<template>
	<view style="width: 100%;height: 100vh;background-color: #F3F4F5;padding: 30rpx 0 0 0;">
		<view class="item" v-for="(item,index) in dataArr" :key="index">
			<view class="q flex_r_between">
				<view class="flex_r_start">
					<view class="dw">￥</view>
					<view class="jiazhi">{{item.amount}}</view>
				</view>
				<view>
					<view class="fw">{{item.name}}</view>
					<view class="rq">{{$dateFormat(item.date_start*1000,'Y.m.d')}}-{{$dateFormat(item.date_end*1000,'Y.m.d')}}0</view>
				</view>
				<view class="ljsy">{{item.state_name}}</view>
			</view>
			<view class="line"></view>
			<view class="flex_r_between">
				<view class="tip" :class="{isOpen:isOpen==index?false:true}">{{item.content}}</view>
				<view @click="openauanbu(index)"><image style="width: 24rpx;height: 24rpx;" src="../../static/spokesmanImg/icon/direction_right_black.png" mode=""></image></view>
			</view>
			
			<view class="psi l"></view>
			<view class="psi r"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isOpen:NaN,
				dataArr:[],
			};
		},
		onLoad() {
			uni.getSystemInfo({
			    success:(res)=>{
					console.log(res)
					this.$request('/app/coupon/getCoupons','post',{
						t:res.model,
						access_token:uni.getStorageSync('access_token').replace(/^\"|\"$/g,'')
					}).then(res=>{
						this.dataArr=res.content.coupons_un
					})
				}
			})
			
		},
		methods:{
			openauanbu(index){
				if(this.isOpen===NaN || this.isOpen!==index){
					this.isOpen=index
				}else{
					this.isOpen=NaN
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("@/static/css/flex.css");
	.item{
		opacity: 0.4;
		width: 690rpx;
		height: auto;
		background: linear-gradient(90deg, #EC7172 0%, #FF928F 100%);
		border-radius: 10rpx;
		margin: 0 auto 30rpx;
		position: relative;
		overflow: hidden;
		color: #fff;
		padding: 0 40rpx 20rpx;
		box-sizing: border-box;
		.q{
			height: 140rpx;
			.dw{
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 40rpx;
			}
			.jiazhi{
				font-size: 80rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #FFFFFF;

			}
			.fw{
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;

			}
			.rq{
				margin-top: 8rpx;
				font-size: 22rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;

			}
			.ljsy{
				width: 140rpx;
				height: 44rpx;
				background: #FFFFFF;
				border-radius: 22rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #EB5E5F;
				text-align: center;
				line-height: 44rpx;
			}	
		}
		.line{
			margin: 10rpx 0;
			border-bottom: 1px dashed #fff;
		}
		.tip{
			height: auto;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
		.isOpen{
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	.psi{
		position: absolute;
		top: 144rpx;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background-color: #F3F4F5;
	}
	.l{
		left: -15rpx;
	}
	.r{
		right: -15rpx;
	}
	.ckbky{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #9DA5A8;
		text-align: center;
		text-decoration: underline;
	}
</style>
